<template>
  <div class="setting">
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first" stretch>
          <!-- 一行里面有按钮 -->
          <el-row>
            <el-button
              v-if="
                $store.state.user.userInfo.roles.points.includes(
                  'POINT-ROLE-ADD'
                )
              "
              type="primary"
              icon="el-icon-plus"
              @click="dialogFormVisible = true"
              >新增按钮</el-button
            >
          </el-row>
          <!-- 表格 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="角色名" width="180">
            </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>
            <el-table-column prop="operate" label="操作" width="180">
              <!-- <template slot-scope="{ row }"> -->
              <!-- 具名插槽,通过slot-scope="scope",就能获取到这这一行的所有数据 -->
              <!-- 可以通过解构赋值的方法直接写一个row即可 -->
              <!-- <template slot-scope="scope.row"> -->
              <template slot-scope="{ row }">
                <el-button
                  @click.native.prevent="limitsRow(row.id)"
                  type="text"
                  size="small"
                >
                  分配权限
                </el-button>
                <el-button
                  @click.native.prevent="editRow(row.id)"
                  type="text"
                  size="small"
                >
                  修改
                </el-button>
                <el-button
                  @click.native.prevent="deleteRow(row.id)"
                  type="text"
                  size="small"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- @size-change="handleSizeChange" -->
          <!-- @current-change="handleCurrentChange" -->
          <el-pagination
            @current-change="getAllrole"
            :current-page.sync="pageInfo.page"
            :page-size="pageInfo.pagesize"
            layout="total, prev, pager, next"
            :total="pageInfo.total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-form
            :model="comptForm"
            status-icon
            ref="comptForm"
            label-width="100px"
            class="demo-comptForm"
            style="width: 450px"
          >
            <el-form-item label="企业名称" prop="name">
              <el-input
                disabled
                type="text"
                v-model="comptForm.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司地址" prop="address">
              <el-input
                disabled
                type="text"
                v-model="comptForm.companyAddress"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司电话" prop="phone">
              <el-input
                disabled
                type="text"
                v-model="comptForm.companyPhone"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                disabled
                type="text"
                v-model="comptForm.mailbox"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remaks">
              <el-input
                disabled
                type="text"
                v-model="comptForm.remarks"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <el-dialog
        :title="title"
        :visible="dialogFormVisible"
        @close="dialogFormVisible = false"
      >
        <el-form
          :model="addform"
          style="width: 100%"
          ref="addForm"
          :rules="rules"
        >
          <el-form-item
            label="角色名称"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input
              v-model="addform.name"
              autocomplete="off"
              style="width: 90%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="角色描述"
            :label-width="formLabelWidth"
            prop="description"
          >
            <el-input
              v-model="addform.description"
              autocomplete="off"
              style="width: 90%"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" center>
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>

    <assignPermissions
      :isShow="isShow"
      :treeDate="treeDate"
      :defaultProps="defaultProps"
      :checkedKeys="checkedKeys"
      :currentId="currentId"
    ></assignPermissions>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getCompInfo,
  getAllrole,
  delRole,
  editRole,
  getRole,
  addRole,
} from "@/api/setting";
import assignPermissions from "./components/assignPermissions.vue";
import { getPermissionList } from "@/api/permission";
import { arrayToTree } from "@/utils/index";

export default {
  name: "setting",
  data() {
    return {
      currentId: "",
      defaultProps: {
        children: "children",
        label: "name",
      },
      checkedKeys: [],
      //获取树的数据
      treeDate: [],
      //是否显示树结构的弹框
      isShow: false,
      //label的宽度
      formLabelWidth: "120px",
      //弹出框是否显示
      dialogFormVisible: false,
      //新增修改弹出框
      addform: {},
      //设置分页的总页数和当前页数和总页数
      pageInfo: {
        // 每页总页数
        pagesize: 10,
        //当前页数
        page: 1,
        //总共页数
        total: 0,
      },
      //公司信息
      comptForm: {},
      //tba切换的默认name
      activeName: "first",
      //表格数据
      tableData: {},
      rules: {
        name: [
          {
            required: true,
            message: "请输入角色名",
            trigger: "blur",
          },
        ],
        description: [
          {
            required: true,
            message: "请输入角色描述",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    //获取公司信息
    this.getCompInfo();
    //获取所有角色列表
    this.getAllrole();
  },
  methods: {
    //调用公司信息的接口,然后传入getter的公司id,然后页面打开的时候就调用
    async getCompInfo() {
      let res = await getCompInfo(this.userInfo.companyId);
      console.log(res);
      this.comptForm = res.data;
    },

    //调用所有角色列表展示
    async getAllrole() {
      //   let res = await getAllrole(this.pageInfo);
      let res = await getAllrole(this.pageInfo);
      console.log(res);
      this.pageInfo.total = res.data.total;
      this.tableData = res.data.rows;
      //   this.tableData.length = this.pageInfo.pagesize;
    },
    //删除角色方法
    async deleteRow(id) {
      //   console.log(id);

      try {
        await this.$confirm("确定要删除这个角色吗?");
        await delRole(id);
        // 第一页
        // 中间页
        // 最后一页
        //思路:首先判断是不是第一页,如果是第一页,就直接调用列表接口即可
        //如果不是第一页,在判断是不是最后一页,如果都不是说明是中间页,那就在那一页获取那一页的数据即可,
        //如果是最后一页,

        // // 正常代码

        //  else {
        //   await this.getAllrole({ page: this.pageInfo.page });
        // }

        // this.pageInfo.page = Math.floor(
        //   this.pageInfo.total / this.pageInfo.pagesize
        // );
        // if (this.pageInfo.page <= this.pageInfo.pagesize) {
        //   this.pageInfo.page =
        //     this.pageInfo.page < 1 ? "1" : this.pageInfo.page;
        // }
        // await this.getAllrole({ page: this.pageInfo.page });
        /**思路:1-首先调用删除接口字后,让总数据减一,(因为此时还没有调用查询的接口,总数据还是没有少.)
         * 2-然后通过(总数据)/(页容量)然后向上取整.这个时候会获取到当前数据的总页数
         * 3-通过获取到的总页数判断,当前删除的页面是否在最后一页,然后不是在第几页就调用第几页的页码获取数据即可
         * 4-如果是最后一页删除就调用查询接口传入最后一页的数据.但是如果最后一页是第一页,此时需要判断一下,如果页码小于1,查询数据接口就传入第一页的页码即可.
         */

        this.pageInfo.total = this.pageInfo.total - 1;
        let pageList = Math.ceil(this.pageInfo.total / this.pageInfo.pagesize);
        if (this.pageInfo.page < pageList) {
          await this.getAllrole();
        } else {
          if (pageList <= this.pageInfo.pagesize) {
            this.pageInfo.page = pageList < 1 ? "1" : pageList;
          }
          await this.getAllrole({ page: pageList });
        }
      } catch (error) {
        console.log("取消了");
      }
    },
    //通过点击修改,弹出框
    async editRow(id) {
      this.dialogFormVisible = true;
      let res = await getRole(id);
      console.log(res);
      this.addform = res.data;
      //清除addform的所有数据
      this.addform = {};
      //重置addform的表单数据
      this.$refs.addForm.resetFields();
    },
    //通过点击确定,修改或者新增
    save() {
      addRole;
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          if (this.addform.id) {
            await editRole(this.addform);
          } else {
            await addRole(this.addform);
          }
        }

        await this.getAllrole();
        this.$message.success(this.title + "成功");
        this.dialogFormVisible = false;
        this.addform = {};
        this.$refs.addForm.resetFields();
      });
    },
    //点击分配权限展示数据
    async limitsRow(id) {
      this.currentId = id;
      //   console.log(this.currentId);
      this.isShow = true;
      let res = await getPermissionList();
      //   console.log(res);
      this.treeDate = arrayToTree(res.data, "0");
      let res1 = await getRole(id);
      console.log(res1);
      this.checkedKeys = res1.data.permIds;
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
    title() {
      return this.addform.id ? "编辑页面" : "新增页面";
    },
  },
  components: {
    assignPermissions,
  },
};
</script>

<style lang="scss">
body {
  background-color: #f0f2f5;
}
.setting {
  padding: 20px;
  .el-row {
    margin: 20px 0 20px 20px;
  }

  #tab-first,
  #tab-second {
    font-size: 18px;
    // font-weight: 700;
    padding: 0 30px;
  }
  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
  .el-form {
    width: 450px;
    margin: 30px auto;
  }
  .el-dialog__header {
    background-color: #66b1ff;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__close::before {
      color: #fff;
    }
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>